<template>
  <div style="overflow:hidden">
      <h5 class="header">{{titel}}<svg t="1645256086745" class="icon" style='margin-left:10px;' viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2157" width="16" height="16"><path d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM448 448h128v384H448V448z m0-256h128v128H448V192z" fill="#8a8a8a" p-id="2158"></path></svg></h5>
      <div >
          <span style="margin-right:30px;font-size:25px;">{{data[0]}}</span>
          <span>
              {{data[1]}}
              <svg t="1645254310949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2025" width="16" height="16"><path d="M768 384L512 128 256 384h192v512h128V384z" p-id="2026" fill="#1afa29" v-if="data[2]"></path>
              </svg>
              <svg t="1645255409526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1542" width="16" height="16"><path d="M950.812845 413.960501 516.366438 848.406907 81.920032 413.960501Z" p-id="1543" fill="#d81e06" v-if='!data[2]'></path></svg>
            </span>
      </div>
      <div ref="main" style="width:280px;height:70px;"></div>
  </div>
</template>

<script>
export default {
    name:"miniCard",
    methods:{
        getPhoto(){
             const myChart = this.$echarts.init(this.$refs.main)
                myChart.setOption({
                xAxis: {
                    data: ['A', 'B', 'C', 'D', 'E','e','f','g','a','c'],
                    show :false
                },
                yAxis: {
                    show  :false
                },
                series: [
                {
                data: [10, 8, 110, 23, 19,5,7,54,30,123],
                type: 'line',
                smooth: true,
                symbol: "none",
                label: {show: false},
                areaStyle:{
                color:{
                    //线性渐变
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'rgba(30,144,255,0.6)', // 0% 处的颜色
                    }, {
                        offset: 0.8, color: 'rgba(30,144,255,0)', // 100% 处的颜色
                    }],
                    global: false, // 缺省为 false
                },
                },
                itemStyle : {  
                    normal : {  
                        lineStyle:{  
                            color:'#0000CD'  
                        }  
                    }  
                }, 
                }
                ],
                grid:{
                    left:0,
                    right:0
                }
            })
        }
    },
    mounted(){
        this.getPhoto()
    },
    props:['data','titel']
}
</script>

<style scoped>
h5{
    padding: 0;
    margin: 0;
    color: gray;
    padding-bottom: 20px;
}
.header{
    display:flex;align-items:center;
}
</style>